<template>
    <div>
       <div class="recommend-title">
          周末去哪儿
       </div>
       <ul>
           <li class="list-item" v-for="item of weekendList" :key="item.id">
               <div class="item-img">
                   <img :src="item.imgUrl" alt="">
               </div>
               <div class="item-img-tag">{{item.tag}}</div>
               <div class="item-info">
                   <div class="inner-box">
                       <div class="info-title">{{item.title}}</div>
                       <div class="info-comment">{{item.comment}}</div>
                   </div>
               </div>
           </li>
       </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    weekendList: Array
  },
  data: function () {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/css/variables.styl'
    @import '~@/assets/css/mixins.styl'
    div{
        box-sizing:border-box;
    }
    .recommend-title{
        width: 100%;
        height: .6rem;
        line-height: .6rem;
        font-size: .24rem;
        padding-left:.2rem;
        background-color: #eee;
    }
    .list-item .item-img{
       overflow:hidden;
       width: 100%;
       height: 0;
       padding-bottom: 37.1%
    }
    .list-item .item-img img{
        width:100%;
    }
    .list-item .item-info{
        float: left;
        width: 100%;
        height: 1.24rem;
        padding: .14rem .2rem .2rem .2rem;
    }
    .list-item .item-img-tag{
        position:absolute;
        top: .2rem;
        left: .2rem;
        width: 1.02rem;
        height: .38rem;
        line-height:.38rem;
        color: #fff;
        font-size: .2rem;
        text-indent: .04rem;
    }
    .list-item .item-info .inner-box .info-title{
        width: 100%;
        height: .48rem;
        line-height: .48rem;
        font-size: .28rem;
        ellipsis();
    }
    .list-item .item-info .inner-box .info-comment{
        width: 100%;
        height: .4rem;
        line-height: .4rem;
        font-size: .24rem;
    }
</style>
